<template>
  <div>
    <el-dialog
      :title="isUpdate ? '编辑' : 'hive导数mysql'"
      v-model="props.visible"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
      @close="closeDialog()"
    >
      <el-form
        :model="form"
        label-position="right"
        label-width="100px"
        ref="formRef"
        @submit.prevent
        :rules="rules"
        v-loading="loading"
      >
        <el-row :gutter="20">
          <el-col :span="17" :offset="1">
            <el-form-item label="手机号：" prop="mobileNo">
              <el-input
                placeholder="请输入手机号或身份证"
                v-model="form.mobileNo"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18" :offset="1">
            <el-form-item label="类型：" prop="executeType">
              <el-radio-group v-model="form.executeType" @change="typeChange">
                <el-radio :value="1">模块</el-radio>
                <el-radio :value="2">表名</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modelShow">
          <el-col :span="18" :offset="1">
            <el-form-item label="归属模块：" prop="modelName">
              <el-radio-group v-model="form.modelName">
                <el-radio :value="1">新核心</el-radio>
                <el-radio :value="2">老核心</el-radio>
                <el-radio :value="3">emc会员</el-radio>
                <el-radio :value="4">yika(新、老)</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="tableShow">
          <el-col :span="17" :offset="1">
            <el-form-item label="表名：" prop="tableName">
              <el-input
                placeholder="请输入表名(多表用，隔开)"
                v-model="form.tableName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-row :gutter="20"
          ><el-col :span="17" :offset="1">
            <div
              class="dialog-footer"
              style="display: flex; justify-content: left; margin-bottom: 30px"
            >
              <el-button type="primary" @click="save()" :disabled="btnDisabled"
                >开 始</el-button
              >
              <el-button @click="closeDialog()" :disabled="btnDisabled"
                >取 消</el-button
              >
            </div>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { kfOperateApi } from "@/api/kernel/kf-operate.js";

const { proxy } = getCurrentInstance();
const modelShow = ref(true);
const tableShow = ref(false);
const typeChange = () => {
  console.log(form.value.executeType);
  if (form.value.executeType == 2) {
    tableShow.value = true;
    modelShow.value = false;
    form.value.modelName = "";
  } else {
    tableShow.value = false;
    modelShow.value = true;
    form.value.modelName = 1;
    form.value.tableName = "";
  }
};

const formRef = ref(null);
const props = defineProps({
  visible: Boolean,
  data: Object,
});
const emits = defineEmits(["update:visible", "done"]);

const form = ref({
  modelName: 1,
  executeType: 1,
  mobileNo: '',
  tableName: "",
});
const rules = ref({
  mobileNo: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
});
onMounted(async () => {
  if (props.data) {
    isUpdate.value = true;
  } else {
    isUpdate.value = false;
  }
});

// 是否是编辑状态
const isUpdate = ref(false);

const handleClose = (done) => {
  if (execStatus.value == 2) {
    ElMessage({
      showClose: true,
      message: "当前任务正在执行中，请勿关闭！",
      type: "warning",
    });
    return false;
  } else {
    done();
    return true;
  }
};

const closeDialog = () => {
  updateVisible(false);
  emits("done");
};
// 更改弹框状态
const updateVisible = (value) => {
  emits("update:visible", value);
};

//#- 保存
const loading = ref(false);
const btnDisabled = ref(false);
const execStatus = ref(1);
const save = () => {
  console.log(form.value);

  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      execStatus.value = 2;
      stopF5Refresh();
      ElMessage("开始执行任务，查询hive较慢，请耐心等待！");
      loading.value = true;
      btnDisabled.value = true;
      kfOperateApi
        .dataImport(form.value)
        .then((response) => {
          console.log("import:response", response);

          ElMessage({
            showClose: true,
            message: `${response.msg}`,
            type: "success",
          });

          closeDialog();
          execStatus.value = 3;
          loading.value = false;
          btnDisabled.value = false;
        })
        .catch((error) => {
          execStatus.value = 4;
          loading.value = false;
          btnDisabled.value = false;
          closeDialog();
        });
    }
  });
};

//阻止F5刷新
const stopF5Refresh = () => {
  document.onkeydown = function (e) {
    var evt = window.event || e;
    var code = evt.keyCode || evt.which;
    if (code == 116) {
      if (evt.preventDefault) {
        evt.preventDefault();
      } else {
        evt.keyCode = 0;
        evt.returnValue = false;
      }
    }
  };
};
</script>
